/*
* @Author: Yejing
* @Date: 2023-05-29 17:18:37
* @LastEditors: Yejing
* @LastEditTime: 2023-07-04 15:56:19
* @Description: 搜索各个分类
*/

<template>
	<view :class="`searchInfo-page ${pageType?'dark':''}`">
		<c-layout @getNewsData="getNewsData">
			<!-- 头部 -->
			<c-navigation-bar v-if="!pageType" :focus="true" :input="CNinput" slot="head" @inputEvent="inputEvent"
				:is-search="typeIndex!==4" @searchEvent="searchEvent" searchBgcolor="#F6F7FB">
			</c-navigation-bar>
			<view class="" v-else slot="head">
				<c-status-bar />
				<view class="dark-head">

					<view class="left-icon" @click="publicJS.backOption()">
						<imageForSize size="24" :src="require('@/static/images/user/left.png')"></imageForSize>
					</view>
					<view class="input-box">
						<u-icon name="search" size="30" color="#888890" @click="getvideoList()"></u-icon>
						<input type="text" @confirm="getvideoList()" v-model="searchVideoValue" :auto-focus="true"
							:placeholder="'请输入关键字'" />
					</view>
					<view class="search" @click="getvideoList()">
						<text>搜索</text>
					</view>
				</view>
			</view>

			<!-- 内容区 -->
			<view class="container-box">
				<!-- 搜索缓存区 -->
				<view v-show="typeBox=='searchList'">
					<view class="search-list" id="search-list">
						<u-tag color='black' class="uTag"
							v-for="(item,index) in vuex_search_list.filter(item=>item.userId===vuex_user_info.id)" :key="index"
							:text="item.text" closeable @click="tagClick(item.text)" @close="deleteEvent(item)" />
					</view>
					<!-- 展开 -->
					<view class="more" @click="moreClick" v-if="vuex_search_list.length>0">
						<view v-if="!trendsBox &&searchListHeight>83">
							{{ $t('searchInfo.expand') }}
							<u-icon name="arrow-down"></u-icon>
						</view>
					</view>
				</view>
				<!-- 模糊搜索列表 -->
				<view class="fuzzy-list" v-if="typeBox=='fuzzyList'">
					<view class="line" v-for="(item,index) in fuzzyList" :key="item.id" @click="fuzzyListClick(item.goodsName)">
						<u-icon name="search" color="#c8c9cc"></u-icon>
						<view class="text">
							{{ item.goodsName }}
						</view>
					</view>
				</view>

				<!-- 搜索分类 -->
				<c-tabs v-model="activeTabs" @tabClick="tabClick"  v-if="typeBox=='productList' && '1' &&(!pageType) ">
					<c-tab-pane :label='this.$t("searchInfo.tabList[0]")' name="product">
						<view class="">
							<waterfallView>
								<view class="item" v-for="card in productCardList" :key="card.id">
									<productCard :details="card" type="center" @click="productCardClick(card.id)">
									</productCard>
								</view>
							</waterfallView>
						</view>
					</c-tab-pane>
					<c-tab-pane :label='this.$t("searchInfo.tabList[1]")' name="shop">
						<view class="">
							<waterfallView>
								<view class="item mb20" v-for="card in shopCardList" :key="card.id">
									<shopsCard :details="card"></shopsCard>
								</view>
							</waterfallView>
						</view>
					</c-tab-pane>
					<c-tab-pane :label='this.$t("searchInfo.tabList[2]")' name="active">
						<view class="item" v-for="card in couponList" :key="card.id">
							<couponCard :info="card"></couponCard>
						</view>
					</c-tab-pane>
					<c-tab-pane :label='this.$t("searchInfo.tabList[3]")' name="another">
						<view class="item" v-for="card in anchorList" :key="card.userId">
							<anchorCard :details="card" @isloading="isloading"></anchorCard>
						</view>
					</c-tab-pane>
					<c-tab-pane :label='this.$t("searchInfo.tabList[4]")' name="video">
						<scroll-list ref="videoList" :option="queryParams" @refresh="refresh('video')" @load="loadMore('video')">
							<view class="video">
								<view class="item" v-for="(card,ind) in videoData.list" :key="card.videoId">
									<videoCard :details="{...card,img:$u.appImage.getOssVideoCover(card.url + '')}"
										@videoInfo='videoInfo(ind)'></videoCard>
								</view>

							</view>
						</scroll-list>

					</c-tab-pane>
				</c-tabs>

				<!-- 			<searchType v-if="typeBox=='productList' && '1' &&(!pageType) " :searchType='searchType'
					@noticeHandle="noticeHandle">
					<template v-for="(swiper,index) in searchType.info" :slot='index'>
						<swiper-item @catchtouchmove="stopTouchMove" :key="index">
							<scroll-view class="main-info" @scrolltolower="getNewsData" scroll-y="true" style="height: 100%">

								<waterfallView>
									<view class="item" v-if="index==0" v-for="card in productCardList" :key="card.id">
										<productCard :details="card" type="center" @click="productCardClick(card.id)">
										</productCard>
									</view>
									<view class="item mb20" v-if="index==1" v-for="card in shopCardList" :key="card.id">
										<shopsCard :details="card"></shopsCard>
									</view>
								</waterfallView>



							</scroll-view>
						</swiper-item>
					</template>
				</searchType> -->

				<!-- 				<view class="" v-else-if="pageType == 'video'">
					<scroll-list ref="videoList" :option="queryParams" @refresh="refresh('video')" @load="loadMore('video')">
						<view class="video">
							<view class="item" v-for="(card,ind) in videoData.list" :key="card.videoId">
								<videoCard :details="{...card,img:$u.appImage.getOssVideoCover(card.url + '')}"
									@videoInfo='videoInfo(ind)'></videoCard>
							</view>
						</view>
					</scroll-list>
				</view>
			 -->
			</view>
		</c-layout>


		<!-- 视频弹框 -->
		<u-popup v-model="videoShow" mode="center">
			<video id="myVideo" :src="videoSrc" style="display: block" enable-danmu controls></video>
		</u-popup>
		<u-mask :show="loading" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<u-loading mode="flower" size="36"></u-loading>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import shopsCard from "./components/shopsCard/shopsCard.vue"
	import couponCard from "@/components/couponCard/couponCard.vue"
	import productCard from "@/components/productCard/productCard.vue"

	export default {
		components: {
			shopsCard,
			productCard
		},
		data() {
			return {
				loading: false,
				//搜索

				//动态盒子状态
				trendsBox: false,
				//盒子高度
				searchListHeight: 0,
				//显示盒子类型
				typeBox: 'searchList',
				//模糊列表
				fuzzyList: [],
				//搜索分类数据
				searchType: {
					//分类列表
					tabList: this.$t("searchInfo.tabList"),
					//内容Data
					info: [{
							data: [],
						},
						{
							data: [],
						},
						{
							data: []
						},
						{
							data: []
						},
						{
							data: []
						}
					]
				},
				videoShow: false,
				postproductListObj: {
					size: 9999,
					current: 1
				},
				paging: {
					pageNum: 1,
					pageSize: 9999
				},
				productCardList: [],
				couponList: [

				],
				shopCardList: [],
				anchorList: [],
				videoData: {
					list: [],
					paging: {
						pageNum: 1,
						pageSize: 20,
					},
				},
				videoListGet: false,
				CNinput: {
					value: '',
					placeholder: this.$t("searchInfo.queryProduct")
				},
				total: 0,
				typeIndex: 0,
				videoSrc: '',
				searchVideoValue: '', // 查询短视频的val
				pageType: '', // 页面类型空字符串为原始页面类型
				activeTabs: 'product',
			}
		},
		onLoad(data) {
			//获取盒子高度
			this.$nextTick(() => {
				this.getHeight()
			})
			// type 传入
			if (data.type) {
				this.pageType = data.type
				this.typeBox = 'productList'
				this.CNinput.placeholder = this.$t("searchInfo.queryProduct1")
			}
		},
		computed: {
			queryParams() {
				return {
					pageNum: this.videoData.paging.pageNum,
					size: this.videoData.paging.pageSize,
					offsetBottom: 10,
					contentHeight: 0,
					safeArea: true,
					auto: false,
					emptyText: this.$t('system.NoRecord'),
					noMoreText: this.$t('system.NoFurtherDataAvailable'),
					showPullDown: false,
					loadDisabled: false
				}
			},
		},
		methods: {
			isloading(val) {
				console.log('=============', val)
				this.loading = val
			},
			//搜索
			searchEvent(val) {
				console.log(val, this.typeIndex, this.typeBox)
				this.videoData.paging.pageNum = 1
				this.paging.pageNum = 1
				this.videoData.paging.pageNum = 1
				this.paging.name = this.CNinput.value
				this.CNinput.value = val
				this.productCardList = []
				//判断缓存是否有当前值
				if (this.vuex_search_list.some(item => item.text === val && item.userId === this.vuex_user_info.id)) {
					this.postproductListObj.name = val
				} else {
					if (val) {
						this.$u.vuex('vuex_search_list', [{
							text: val,
							userId: this.vuex_user_info.id
						}, ...this.vuex_search_list])
						this.postproductListObj.name = val
					} else {
						delete this.postproductListObj.name
					}
				}
				this.shopCardList = []
				this.anchorList = []
				this.videoData.list = []
				if (this.typeBox !== 'productList') {
					this.$u.post('/app/shopGoodsInfo/useraLLpage', this.postproductListObj).then(res => {
						if (res.data.records.length > 0) {
							if (this.typeBox == 'fuzzyList') {
								this.fuzzyList = res.data.records
							} else {
								//去重
								this.productCardList = [...this.productCardList, ...res.data.records].filter(function(
									element, index, self) {
									return self.findIndex(el => el.id == element.id) === index
								})
							}

							this.total = res.data.total
							this.activeTabs = 'product'
						} else {
							this.fuzzyList = []
							this.productCardList = []
							this.$u.post('/app/shop/list', this.paging).then(r => {
								if (r.data.records&&r.data.records.length>0) {
									this.shopCardList = [...this.shopCardList, ...r.data.records].filter(function(element, index,
										self) {
										return self.findIndex(el => el.id == element.id) === index
									})
									this.total = r.data.total
									this.activeTabs = 'shop'
								} else {
									this.$u.post('/app/anchor/anchorList', this.paging).then(e => {
										if (e.data.records.length > 0) {
											this.anchorList = [...this.anchorList, ...e.data.records].filter(function(element,
												index,
												self) {
												return self.findIndex(el => el.userId == element.userId) === index
											})
											console.log(this.anchorList);
											this.total = e.data.total
											this.activeTabs = 'another'
										} else {
											this.activeTabs = 'video'
											this.typeIndex=4
												this.getvideoList(false, val)
										}

									})
								}

							})
						}

					})
					
					this.typeBox = 'productList'
				} else {
					if (this.typeIndex == 0) {
						this.getProductList(this.postproductListObj)
					}
					//获取商铺
					if (this.typeIndex == 1) {
						this.getShopList(this.paging)
					}
					//获取主播
					if (this.typeIndex == 3) {
						this.getAnchorList(this.paging)
					}
					//获取视频
					if (this.typeIndex == 4) {
						this.getvideoList(false, val)
					}
				}

			},
			//删除
			deleteEvent(item) {


				let searchList = this.vuex_search_list
				searchList.forEach((i, k) => {
					if (i == item) {
						searchList.splice(k, 1)
					}
				})
				this.$u.vuex('vuex_search_list', searchList)
				this.getHeight()
			},
			//切换
			moreClick() {
				this.trendsBox = !this.trendsBox
				this.getHeight()
			},

			//获取div高度
			getHeight() {
				this.searchListHeight = document.getElementById('search-list').offsetHeight
				if (this.searchListHeight >= 73.5 && !this.trendsBox) {
					document.getElementById('search-list').setAttribute('style', 'height: 73.5px;overflow-y:hidden');
				} else if (this.searchListHeight >= 73.5 && this.trendsBox) {
					document.getElementById('search-list').setAttribute('style',
						'height: auto !important;overflow-y:scroll;max-height: calc(100vh - 125px)');
				}
			},
			//输入内容发生变化触发此事件
			async inputEvent(val) {
				if (this.pageType === 'video') {
					return
				}
				this.postproductListObj.current = 1
				if (val) {
					this.typeBox = 'fuzzyList'
					this.postproductListObj.name = val
					await this.getProductList(this.postproductListObj)

				} else {
					this.typeBox = 'searchList'
				}
			},
			//模糊列表点击
			fuzzyListClick(val) {
				this.searchEvent(val)
			},
			//点击标签
			tagClick(val) {
		this.videoData.paging.pageNum = 1
		this.paging.pageNum = 1
		this.videoData.paging.pageNum = 1
		this.paging.name = val
		this.postproductListObj.name = val
		this.CNinput.value = val
				this.typeBox = 'productList'
			this.$u.post('/app/shopGoodsInfo/useraLLpage', this.postproductListObj).then(res => {
				if (res.data.records.length > 0) {
					if (this.typeBox == 'fuzzyList') {
						this.fuzzyList = res.data.records
					} else {
						//去重
						this.productCardList = [...this.productCardList, ...res.data.records].filter(function(
							element, index, self) {
							return self.findIndex(el => el.id == element.id) === index
						})
					}
			
					this.total = res.data.total
					this.activeTabs = 'product'
				} else {
					this.fuzzyList = []
					this.productCardList = []
					this.$u.post('/app/shop/list', this.paging).then(r => {
						if (r.data.records&&r.data.records.length>0) {
							this.shopCardList = [...this.shopCardList, ...r.data.records].filter(function(element, index,
								self) {
								return self.findIndex(el => el.id == element.id) === index
							})
							this.total = r.data.total
							this.activeTabs = 'shop'
						} else {
							this.$u.post('/app/anchor/anchorList', this.paging).then(e => {
								if (e.data.records.length > 0) {
									this.anchorList = [...this.anchorList, ...e.data.records].filter(function(element,
										index,
										self) {
										return self.findIndex(el => el.userId == element.userId) === index
									})
									console.log(this.anchorList);
									this.total = e.data.total
									this.activeTabs = 'another'
								} else {
									this.activeTabs = 'video'
										this.getvideoList(false, val)
								}
			
							})
						}
			
					})
				}
			
			})
			
			},
			//获取产品列表
			getProductList(postproductListObj) {
				this.$u.post('/app/shopGoodsInfo/useraLLpage', postproductListObj).then(res => {
					if (res.data.records.length > 0) {
						if (this.typeBox == 'fuzzyList') {
							this.fuzzyList = res.data.records
						} else {
							//去重
							this.productCardList = [...this.productCardList, ...res.data.records].filter(function(
								element, index, self) {
								return self.findIndex(el => el.id == element.id) === index
							})
						}

						this.total = res.data.total
					} else {
						this.fuzzyList = []
						this.productCardList = []
					}

				})
			},
			//获取商铺
			getShopList(paging) {
				this.$u.post('/app/shop/list', paging).then(res => {
					this.shopCardList = [...this.shopCardList, ...res.data.records].filter(function(element, index,
						self) {
						return self.findIndex(el => el.id == element.id) === index
					})
					this.total = res.data.total
				})
			},
			//获取主播
			getAnchorList(paging) {
				this.$u.post('/app/anchor/anchorList', paging).then(res => {
					this.anchorList = [...this.anchorList, ...res.data.records].filter(function(element, index,
						self) {
						return self.findIndex(el => el.userId == element.userId) === index
					})
					console.log(this.anchorList);
					this.total = res.data.total
				})
			},
			//获取视频
			getvideoList(add, name) {
				console.log(this.videoData.paging, name);
				this.$u.post('/app/short/video/recommendedList', {
					...this.videoData.paging,
					name: this.searchVideoValue || name
				}).then(res => {
					console.log(this.$refs.videoList, 'refs');
					const ref = this.publicJS.tryGet(() => this.$refs.videoList[0]) || this.$refs.videoList
					if (add) {
						this.videoData.list = [...this.videoData.list, ...res.data.records]
						console.log(this.videoData.list);
						ref.loadSuccess({
							list: this.videoData.list,
							total: res.data.total
						})
					} else {
						this.videoData.list = res.data.records
						ref.refreshSuccess({
							list: this.videoData.list,
							total: res.data.total
						})
					}
					this.total = res.data.total
				})
			},
			//冒泡事件避免影响底层滚动
			stopTouchMove() {
				return false;
			},
			videoInfo(index) {
				this.goRecordVideo(index)
				// this.videoShow = true
				// this.videoSrc = this.$u.file.getMedieUrl(val.url)
			},

			//滑动or点击tab
			tabClick(e) {
				console.log(e, this.searchType)
				// this.CNinput.value = ''
				this.activeTabs = e
				this.paging.pageNum = 1
				this.videoData.paging.pageNum = 1
				this.paging.name = this.CNinput.value
				this.shopCardList = []
				this.anchorList = []
				this.videoData.list = []
				switch (e) {
					case 'product':
						this.getProductList(this.postproductListObj)
						this.typeIndex = 0
						break;
					case 'shop':
						this.getShopList(this.paging)
						this.typeIndex = 1
						break;
					case 'active':
						break;
					case 'another':
						this.getAnchorList(this.paging)
						this.typeIndex = 3
						break;
					case 'video':
						this.getvideoList()
						this.typeIndex = 4
						break;
					default:
						break;
				}

			},
			//点击卡片进入商品详情
			productCardClick(id) {
				this.$u.route('/pages/productDetails/productDetails', {
					productId: id
				})
			},
			//分页
			getNewsData() {
				switch (this.typeIndex) {
					case 0:
						if (this.typeBox == 'fuzzyList') {
							if (this.fuzzyList.length == this.total) {
								return
							}
							this.postproductListObj.current += 1
							this.getProductList(this.postproductListObj)
							break;

						} else {
							if (this.productCardList.length == this.total) {
								return
							}
							this.postproductListObj.current += 1
							this.getProductList(this.postproductListObj)
							break;
						}

					case 1:
						if (this.shopCardList.length == this.total) {
							return
						}
						this.paging.pageNum += 1
						this.getShopList(this.paging)
						break;
				}
			},
			// 跳转视频记录
			goRecordVideo(index) {
				this.$u.vuex('vuex_video_record', {
					list: this.videoData.list,
					index,
					show: true
				})
				uni.navigateTo({
					url: "/pages/public/recordVideo/recordVideo",
					"animationType": "slide-in-right",
					"animationDuration": 300
				})
			},

			// 刷新
			refresh(key) {
				switch (key) {
					case 'video':
						this.videoData.paging = {
							...this.videoData.paging,
							pageNum: 1,
						}
						this.getvideoList()
						break;
					default:
						break;
				}
			},
			// 加载跟多
			loadMore(key) {
				switch (key) {
					case 'video':
						this.videoData.paging = {
							...this.videoData.paging,
							pageNum: this.videoData.paging.pageNum + 1,
						}
						this.getvideoList(true)
						break;
					default:
						break;
				}
			},
		}
	}
</script>

<style lang="scss">
	.searchInfo-page {
		overflow-y: hidden;
		height: 100vh;
		font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;

		&.dark {
			background-color: #000;
		}

		// 
		.dark-head {
			padding-top: 20rpx;
			width: 100%;
			height: 100rpx;
			// background-color: #EDEDED;
			display: flex;
			align-items: center;

			.left-icon {
				padding-left: 30rpx;
			}

			.input-box {
				flex: auto;
				background-color: #1A1E29;
				margin-left: 20rpx;
				height: 66rpx;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				border-radius: 10rpx;

				uni-input {
					width: 100%;
					font-size: 30rpx;
					color: #FAFAFC;
				}

				/deep/ .uni-input-input {
					caret-color: #888890;
				}

				.u-icon {
					margin-right: 8rpx;
				}
			}

			.search {
				color: #888890;
				font-size: 30rpx;
				padding-right: 30rpx;
				padding-left: 10rpx;
			}
		}

		.container-box {
			// padding-top: 0;
			height: 100%;
		}

		.search-list {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 15rpx;
			overflow-y: scroll;
			height: auto;

			.uTag {
				border-radius: 40rpx;
				border: 1px solid #EDEDED;
				margin: 0rpx 10px 20rpx 0rpx;
				background-color: #FAFAFC;
				display: flex;
				height: 62rpx;
				min-width: 140rpx;
				text-align: center;
				max-width: 294rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				display: inline-block;
				padding-right: 40rpx;
				position: relative;
				line-height: 38rpx;

				/deep/ .u-icon-wrap {
					position: absolute;
					right: 10rpx;
					top: 20rpx;
				}
			}
		}

		.fuzzy-list {
			.line {
				padding-bottom: 10rpx;
				border-bottom: 1rpx solid #EDEDED;
				margin-bottom: 20rpx;
				display: flex;
				padding: 30rpx 0;

				.u-icon {
					margin-right: 20rpx;
				}

				.text {
					width: calc(100% - 28rpx);
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					//display: inline-block;
				}
			}
		}

		.more {
			display: table;
			margin: 0 auto;
			color: #2C37D1;
		}

		.video {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.item {
				margin-bottom: 20rpx;
			}

			&:after {
				content: '';
				width: 30%;
				height: 0;
				visibility: hidden;
			}
		}

		.mb20 {
			margin-bottom: 20rpx;
		}
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	/deep/ .c-tabs .c-tabs-title .c-tabs-title-btn {
    min-width: 18%;
    text-align: center;
}
/deep/ .c-tabs .c-tabs-title{
   overflow-x: scroll;
}
</style>